﻿@{
    ViewBag.Title = "小程序设置";
}

@section scripts
{
    <link rel="stylesheet" href="../Scripts/kindeditor-4.1.10/themes/default/default.css"/>
    <script charset="utf-8" src="../Scripts/kindeditor-4.1.10/kindeditor-min.js"></script>
    <script charset="utf-8" src="../Scripts/kindeditor-4.1.10/lang/zh_CN.js"></script>
    <script src="@Url.Content("~/Scripts/shared/share.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/shared/shown.js")" type="text/javascript"></script>
}

<style>
    html, html body {
        overflow: auto;
    }
    .be-auth { display: none }
</style>

<form id="form1" method="post">
    <div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
        <table style="width: 100%;">
            <tr>
                <td style="width: 100%;">
                    <a class="mini-button" name="SaveInfo" iconCls="icon-save" onclick="SaveInfo" plain="true">保存</a>
                    <a class="mini-button" iconCls="icon-close" onclick="CloseWindow" plain="true">关闭</a>
                </td>
            </tr>
        </table>
    </div>
    <div name="Base" style=" margin-top: 15px; margin-left: 20px">
        <div style="width: 800px;float: left">
            <table>
                <tr>
                    <td width="120px" height="50px" align="right">小程序appid：</td>
                    <td colspan="2">
                        <input id="appid" name="appid" class="mini-textbox" required="true" width="250"/>
                    </td>
                </tr>
                <tr>
                    <td width="120px" height="50px" align="right">是否已授权：</td>
                    <td colspan="3">
                        <div class="be-auth" >
                            <span>已授权</span>
                        </div>
                        <div class="no-auth">
                            <span>未授权</span><a href="javascript:;" id="goAuth" onclick="goAuth()" style="margin-left: 10px;">去授权</a>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="be-auth">
                <tr>
                    <td width="120px" height="50px" align="right">轮播图：</td>
                    <td colspan="3" style="white-space: inherit !important; ">
                        <div id="images" style="display: inline-block;">
                            <img id="Image0" src="~/Content/Images/NoImage.jpg" style="margin-right: 1px;" width="190" height="120" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="120px" height="50px" align="right">
                        列表模板：
                    </td>
                    <td width="200px" height="50px">
                        <div id="templateList" name="templateList" class="mini-radiobuttonlist" repeatDirection="vertical"
                             textField="text" valueField="id" value="0" data="[{ id:1, text: '模板一' },{ id:2, text: '模板二'}]">
                        </div>
                    </td>
                    <td width="80px" height="50px" align="right">
                        自提送货：
                    </td>
                    <td width="200px" height="50px">
                        <div id="delivery" name="delivery" class="mini-radiobuttonlist" repeatDirection="vertical"
                             textField="text" valueField="id" value="0" data="[{ id:0, text: '两者皆可' },{ id:1, text: '自提'},{ id:2, text: '送货'}]">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="be-auth" style="float: left">
            <img id="template1" class="template" src="~/Images/Template/list_template1.jpg" width="400" style="display: none"/>
            <img id="template2" class="template" src="~/Images/Template/list_template2.jpg" width="400" style="display: none"/>
        </div>
        <br/>
    </div>
    <input name="FItemID" class="mini-hidden"/>
    <input id="ImagePath" class="mini-hidden"/>
</form>

<div id="win1" class="mini-window" title="授权二维码" style="width: 500px; height: 400px;"
     showMaxButton="true" showCollapseButton="true" showShadow="true"
     showToolbar="true" showFooter="true" showModal="false" allowResize="true" allowDrag="true">
    <div property="toolbar" style="padding: 5px;">
    </div>
    <div property="footer" style="text-align: right; padding: 5px; padding-right: 15px;">
    </div>
    <div id="popUpWin" style="text-align: center;"></div>

</div>
<script>
    //    mini.getbyName("data").setValue("0");
    mini.parse();

    function FormShown() {
        mini.parse();
        loadPage();
    }

    function loadPage() {
        var param = {
            systemAppId: parent.window.getSystemAppID()
        }
        $.ajax({
            url: "/SmallProgramSetting/GetSetting",
            data: param,
            type: "post",
            async: false,
            success: function(res) {
                res = JSON.parse(res);
                if (res.status == 1) {
                    var path = getImagePath();
                    for (var i = 0; i < res.Data.length; i++) {
                        var img = '<img src="' + path + res.Data[i].FImgUrl + '" width="190" height="120" style="margin-right: 5px;" onclick="deleteImage(this)"/>';
                        $("#ImagePath").val($("#ImagePath").val() + ',' + res.Data[i].FImgUrl);
                        $("#images").append($(img));
                    }
                    $("#template" + res.Data2[0].FTemplate).show();
                    mini.getbyName("templateList").setValue(res.Data2[0].FTemplate);
                    mini.getbyName("delivery").setValue(res.Data2[0].FDelivery);
                    mini.getbyName("appid").setValue(res.Data2[0].AppId);
                    if (res.AuthToken != undefined && res.AuthToken != "") {
                        $(".be-auth").show();
                        $(".no-auth").hide();
                    }
                }
            }
        });
    }

    mini.get("templateList").on("valuechanged",
        function(e) {
            $(".template").hide();
            $("#template" + this.getValue()).show();
        });

    function goAuth() {
        var param = {
            appid: mini.getbyName("appid").getValue()
        }
        $.ajax({
            url: "/SmallProgramSetting/QrAuth",
            data: param,
            type: "post",
            async: false,
            success: function(res) {
                res = JSON.parse(res);
                if (res.status == 1) {
                    $("#popUpWin").html('<img width="300" src="' + res.img + '"/>');

                    mini.get("win1").showAtEl(document.getElementById("goAuth"));
                }
            }
        })
    }

    mini.get("win1").on("buttonclick",
        function() {
            location.reload();
        });

    function getImagePath() {
        var result = "";
        $.ajax({
            url: "/GetItem/GetImagePath",
            data: {},
            type: "post",
            async: false,
            success: function(data) {
                result = data;
            }
        });
        return result;
    }

    function ImageFilePath(url) {
        var result = "";
        $.ajax({
            url: "/GetItem/GetImageFilePath",
            data: { Url: url },
            type: "post",
            async: false,
            success: function(data) {
                result = data;
            }
        });
        return result;
    }

    KindEditor.ready(function(K) {
        var editor1 = K.editor({
            uploadJson: '../asp.net/upload_json.ashx?dirs=Mall&mSystemAppID=' + parent.window.getSystemAppID() + '&thumb=true',
            fileManagerJson: '../asp.net/file_manager_json.ashx?dirs=Mall&mSystemAppID=' + parent.window.getSystemAppID(),
            allowFileManager: true
        });

        K('#Image0').click(function() {
            var url = $(this).attr('src');
            if (url.toLowerCase() != "/content/images/noimage.jpg") {
                var cfg = confirm("你确定要删除当前图片信息？");
                if (!cfg) {
                    return;
                } else {
                    $(this).attr('src', "/content/Images/NoImage.jpg");
                    return;
                }
            }

            editor1.loadPlugin('image',
                function() {
                    editor1.plugin.imageDialog({
                        imageUrl: K('#ImageFileUrl').val(),
                        clickFn: function(url, title, width, height, border, align) {
                            var path = ImageFilePath(url);
                            //$("#Image0").attr('src', path);
                            var img = '<img id="Image0" src="' + path + '" width="190" height="120" onclick="deleteImage(this)"/>';
                            $("#ImagePath").val($("#ImagePath").val() + ',' + url);
                            $("#images").append(img);
                            editor1.hideDialog();
                        }
                    });
                });
        });

    });

    function deleteImage(that) {
        var url = $(that).attr('src');
        var cfg = confirm("你确定要删除当前图片信息？");
        if (!cfg) {
            return;
        } else {
            $(that).remove();
            var n = url.indexOf("/Upload/Mall/");
            url = url.substring(n);
            $("#ImagePath").val($("#ImagePath").val().replace("," + url, ""));
            return;
        }
    }

    function SaveInfo() {
        var form = new mini.Form("#form1");
        form.validate();
        if (form.isValid() == false) return;
        var param = {
            systemAppId: parent.window.getSystemAppID(),
            imagePath: $("#ImagePath").val(),
            template: mini.getbyName("templateList").getValue(),
            delivery: mini.getbyName("delivery").getValue(),
            appid: mini.getbyName("appid").getValue()
        }
        $.ajax({
            url: "/SmallProgramSetting/SaveSetting",
            data: param,
            type: "post",
            dataType: "json",
            success: function(res) {
                mini.showTips({ content: res.msg, state: "success", x: "center", y: "top", timeout: 3000 });
            }
        });
    }

</script>